<template>
    <page class="cinema">
        <page-header>影院</page-header>
		<div class="content">
			<div class="queryDiv">
				<div class="leftAddress" @click="isShowCityListView=true">{{currentCityObj.nm}}</div>
				<div class="inputDiv">
					<input type="text" class="txtQuery" placeholder="搜影院">
				</div>
			</div>
			<b-scroll>
				
			</b-scroll>
		</div>
		<city-list-view @getCity="getCity" v-if="isShowCityListView"></city-list-view>
    </page>
</template>

<script>
import cityList from "../config/cityList.js";   //未格式化的数据
import {formatData} from "../utils/dataUtils.js";
import BScroll from "../components/BScroll.vue"
import cityListView from "../components/cityListView.vue";
export default {
	name:"cinema",
	data(){
		return {
			isShowCityListView:false,
			currentCityObj:cityList[0],
			cinemas:[]
		}
	},
	created(){
		this.showLoading("正在定位")
		var myCity = new BMap.LocalCity();
		myCity.get(result=>{
			var cityName = result.name.replace("市","");   //武汉
			this.currentCityObj=cityList.find(item=>{
				return item.nm==cityName;
			});
			this.hideLoading();
			this.getCinemaList(this.currentCityObj.id);
		});
	},
	methods:{
		getCinemaList(cityId){
			this.showLoading("请求数据");
			var d=formatData(new Date());
			let url=`/maoyanApi/ajax/cinemaList?day=${d}&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1556334586625&cityId=${cityId}`
			this.$http.get(url).then(res=>{
				console.log(res.data.cinemas);
				this.cinemas=res.data.cinemas;
				this.hideLoading();
			}).catch(err=>{
				console.log(err);
				this.hideLoading();
			})
		},
		getCity(cityItem){
			this.currentCityObj=cityItem;
			this.isShowCityListView=false;
			this.getCinemaList(this.currentCityObj.id);
		}
	},
	components:{
		BScroll,cityListView
	}
	
}
</script>

<style lang="scss" scoped>
	@import "../assets/css/comm.scss";
	.cinema{
		@include flexbox(column);
		.content{
			flex: 1;
			overflow: auto;
			.queryDiv{
				@include flexbox();
				height: 1rem;
				background-color: #f5f5f5;
				align-items: center;
				.leftAddress{
					width: 1.2rem;
					@include flexbox();
					justify-content: center;
					align-items: center;
				}
				.inputDiv{
					flex: 1;
					box-sizing: border-box;
					padding: 0 .4rem;
					.txtQuery{
						width:100%;
						border: 1px solid lightgray;
						border-radius: 5px;
						text-align: center;
						font-size: .24rem;
						padding: .1rem;
					}
				}
			}
		}
	}
</style>
